<script>
import { api } from '@/api';
import { mapStores } from 'pinia'
import { useAppStore } from '@/stores/app';
import { Button, Field, Form, Toast } from 'vant';

export default {
  components: {
    Button,
    Form,
    Field
  },
  computed: {
    ...mapStores(useAppStore)
  },
  data() {
    return {
      username: '',
      password: '',
      nickname: '',
      mobile: '',
      invitationCode: ''
    }
  },
  watch: {
    '$route.query.invitation_code': {
      immediate: true,
      handler() {
        this.invitationCode = this.$route.query.invitation_code
      }
    }
  },
  methods: {
    async onSubmit(data) {
      const loading = Toast.loading({ message: '注册中...' })

      const res = await api.register({
        userName: data.username,
        passwd: data.password,
        nickName: data.nickname,
        mobile: data.mobile,
        invitation_code: data.invitationCode
      })

      loading.clear()

      if (res.success) {
        Toast.success({ message: '注册成功' })
        this.$emit('success', this.username)
        this.username = this.password = this.nickname = this.mobile = ''
      } else {
        //注册失败
        Toast.fail({ message: res.msg })
      }
    }
  }
}
</script>

<template>
  <Form @submit="onSubmit">
    <Field 
      v-model="username"
      name="username"
      placeholder="请输入用户名"
      size="large"
      style="font-size: 18px;"
      autocomplete="username"
      :rules="[
        { required: true, message: '请填写用户名' },
        { pattern: /^[a-zA-Z0-9]+$/, message: '用户名格式不正确 (仅支持字母和数字)' }
      ]"
    >
      <template #left-icon>
        <div class="flex-centered" style="width: 100%; height: 100%;">
          <img class="icon" src="../assets/icons/account.png" alt="">
        </div>
      </template>
    </Field>
    <Field
      v-model="password"
      type="password"
      name="password"
      placeholder="请输入密码"
      size="large"
      style="font-size: 18px;"
      autocomplete="current-password"
      :rules="[{ required: true, message: '请填写密码' }]"
    >
      <template #left-icon>
        <div class="flex-centered" style="width: 100%; height: 100%;">
          <img class="icon" src="../assets/icons/password.png" alt="">
        </div>
      </template>
    </Field>
    <Field 
      v-model="nickname"
      name="nickname"
      placeholder="请输入昵称"
      size="large"
      style="font-size: 18px;"
      autocomplete="nickname"
      :rules="[{ required: true, message: '请填写昵称' }]"
    >
      <template #left-icon>
        <div class="flex-centered" style="width: 100%; height: 100%;">
          <img class="icon" src="../assets/icons/nickname.png" alt="">
        </div>
      </template>
    </Field>
    <Field 
      v-model="mobile"
      name="mobile"
      placeholder="请输入手机号码"
      size="large"
      style="font-size: 18px;"
      autocomplete="mobile"
      :rules="[
        { required: true, message: '请填写手机号码' },
        { pattern: /^1[3456789]\d{9}$/, message: '手机号码格式不正确' }
      ]"
    >
      <template #left-icon>
        <div class="flex-centered" style="width: 100%; height: 100%;">
          <img class="icon" src="../assets/icons/icon_mobilephonelanding.png" alt="">
        </div>
      </template>
    </Field>
    <Field 
      v-model="invitationCode"
      name="invitationCode"
      placeholder="请输入邀请码"
      size="large"
      style="font-size: 18px;"
      autocomplete="invitationCode"
    >
      <template #left-icon>
        <div class="flex-centered" style="width: 100%; height: 100%;">
          <img class="icon" src="../assets/icons/invitation-code-full.png" alt="">
        </div>
      </template>
    </Field>
    <div class="submit-button-container">
      <Button round block size="large" type="primary" native-type="submit">
        注册
      </Button>
      <div @click="$emit('login')" class="go-to-register">已有账号? 立即登录!</div>
    </div>
  </Form>
</template>

<style lang="less" scoped>
.icon {
  width: 20px;
  height: 20px;
  margin-right: 20px;
}

.submit-button-container {
  margin-top: 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.go-to-register {
  display: inline;
  text-align: center;
  margin-top: 20px;
  font-size: 12px;
  color: #ccc;
  border-bottom: 2px solid #ddd;
  padding-bottom: 2px;
}

</style>
